<template>
    <div style=" padding:13px 0 8px 0px">
        <el-row>
            <img v-show="isActive[0]" src="@/assets/goIndex.png" class="index" @click="toggleImg(0)">
            <img v-show="!isActive[0]" src="@/assets/outIndex.png" class="index" @click="toggleImg(0)">
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'ProcessingAside',
    components: {
    },
    //这里进行优化
    data() {
        return {
            isActive: [true]
        }
    },
    methods: {
        //点击图片进行切换
        toggleImg(index) {
            if (index >= 0 && index < this.isActive.length) {
                this.isActive[index] = true;
            }
            for (let i = 0; i < this.isActive.length; i++) {
                if (i != index) {
                    this.isActive[i] = false;
                }
            }
            if (index == 0) {
                this.goIndex();
            }
        },
        goIndex() {
            this.$router.push("/processing/index");
        },

        created() {
        },
        mounted() {
        },
    }
}
</script>
<style lang="css" scoped>
.el-row {
    width: 260px;
    height: 70px;
    margin: 70px 0;
}

.el-row img {
    margin-left: 30px;
    width: 100%;
}

.forum {
    margin-left: 20px;
    height: 70px;
}
</style>
